<template>
  <!-- 这里是面试技巧修改和新增弹出层组件 -->
  <div class="container">
    <el-dialog :title="form.id ? '修改文章' : '新增文章'" :visible="dialogshow" width="50%">
      <el-form :model="form" label-width="80px" :rules="formrules" ref="form">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <div>
          <el-form-item style="height: 300px" label="文章内容" prop="articleBody">
            <quill-editor v-model="form.articleBody" ref="myQuillEditor" style="height: 200px" :options="editorOption">
            </quill-editor>
          </el-form-item>
        </div>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="form.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
  ['blockquote', 'code-block'], // 引用  代码块
  ['link', 'image'] // 链接、图片、视频
  // ['video']
  // [{ header: 1 }, { header: 2 }] // 1、2 级标题
  // [{ script: 'sub' }, { script: 'super' }] // 上标/下标
  // [{ indent: '-1' }, { indent: '+1' }] // 缩进
  // [{'direction': 'rtl'}],                         // 文本方向
  // [{ size: ['small', false, 'large', 'huge'] }] // 字体大小
  // [{ header: [1, 2, 3, 4, 5, 6, false] }] // 标题
  // [{ color: [] }, { background: [] }] // 字体颜色、字体背景颜色
  // [{ font: [] }] // 字体种类
  // [{ align: [] }] // 对齐方式
  // ['clean'] // 清除文本格式
]

//  导入添加文章接口
import { add, detail, update } from '@/api/hmmm/articles.js'
export default {
  props: ['dialogshow'],
  data() {
    return {
      // 表单数据源
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 表单验证
      formrules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        videoURL: []
      },
      content: null,
      editorOption: {
        placeholder: '',
        theme: 'snow', // or 'bubble'
        placeholder: '请输入文章内容',
        modules: {
          toolbar: {
            container: toolbarOptions
            // container: "#toolbar",
          }
        }
      }
    }
  },
  methods: {
    // 关闭对话框
    close() {
      this.$emit('update:dialogshow', false)
      // 清空表单
      this.form = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      // 移除校验结果
      this.$refs.form.resetFields()
    },
    // 新增
    submit() {
      // 验证表单
      this.$refs.form.validate(async vaild => {
        if (!vaild) return
        if (this.form.id) {
          // id存在是修改
          let res = await update(this.form)
          if (res.status !== 200) return
          // 提示消息
          this.$message.success('文章修改成功')
        } else {
          // id不存在是新增
          // 通过就发送新增请求
          let res = await add(this.form)
          if (res.status !== 200) return
          // 提示消息
          this.$message.success('添加文章成功')
        }
        // 清空表单
        this.form = {
          title: '',
          articleBody: '',
          videoURL: ''
        }
        // 关闭弹出层
        this.close()
        // 更新数据
        this.$emit('getList')
      })
    },
    // 获取详情
    async getdetails(row) {
      let res = await detail(row)
      // console.log(res)
      // 数据回填
      this.form = res.data
    }
  },
  components: {
    quillEditor
  }
}
</script>

<style scoped lang="sass"></style>
